<template>
  <view class="page-container">
    <uni-ele-search :searchForm="searchForm"
                    inline
                    @onSearch="onSearch"></uni-ele-search>
    <view class="btns-box">
      <el-button class="btn" size="mini"
                 type="danger"
                 @click="downloadExcel">下载表格模板
      </el-button>
      <el-upload ref="uploadExcel"
                 :action="uploadUrl"
                 :http-request="uploadSuccess"
                 :limit="1"
                 :show-file-list="false"
                 accept=".xls"
                 class="btn upload-btn">
        上传文件
      </el-upload>
      <el-button class="btn" size="mini"
                 type="info"
                 @click="navToHistory">上传记录
      </el-button>
      <el-button class="btn" size="mini"
                 type="primary"
                 @click="batchDownload">批量导出
      </el-button>
      <el-button class="btn" size="mini"
                 type="primary"
                 @click="batchDownloadAll">导出全部数据
      </el-button>
    </view>
    <uni-ele-table :columns="columns"
                   :data="tableData" pageable
                   @action="handleClick"
                   @pageChange="pageChange"
                   @selectionChange="selectionChange"></uni-ele-table>
    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="visble"
               title="上传表单确认" width="80%">
      <uni-ele-table :columns="columns"
                     :data="tempTableData"
                     pageable
                     @pageChange="pageChange"></uni-ele-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary"
                   @click="confrimSubmit">确认提交
        </el-button>
      </div>
    </el-dialog>
    <el-drawer title="房源信息" direction="rtl" :visible.sync="showDrawer" size="50%" class="house-drawer">
      <house-view />
    </el-drawer>
  </view>
</template>

<script>
import {
  houseList,
  confirm,
  deleteById,
  createDownLoadTask,
  downLoadExcelBatchByType,
  getProjectHouseNameList
} from '@/common/services/house.js';
import HouseView from "../plugins/houseView";
export default {
  components: {HouseView},
  data() {
    return {
      uploadUrl: 'http://localhost:8022/house/importFile',
      visble: false,
      size: 20,
      searchData: {},
      searchForm: [
        {
          title: '房屋类型',
          valueType: 'select',
          value: 'houseTypeName',
          options: []
        },
        {
          title: '小区名称',
          valueType: 'input',
          value: 'communityName'
        },
        {
          title: '建设状态',
          valueType: 'select',
          value: 'status',
          options: [
            {
              name: '已投放',
              value: '已投放'
            },
            {
              name: '建设中',
              value: '建设中'
            },
            {
              name: '待建设',
              value: '待建设'
            }
          ]
        }
      ],
      columns: [
        {
          title: '序号',
          valueType: 'selection',
          width: 50,
          align: 'center'
        },
        {
          title: '房源类型',
          dataIndex: 'houseTypeName',
          align: 'center',
          minWidth: 100,
          style: {
            display: 'flex'
          }
        },
        {
          title: '项目(小区)名称',
          dataIndex: 'communityName',
          minWidth: 120,
          style: {
            display: 'flex'
          }
        },
        {
          title: '申报年度',
          dataIndex: 'annual',
          align: 'center',
          minWidth: 80
        },
        {
          title: '建设状态',
          dataIndex: 'status',
          align: 'center',
          minWidth: 80
        },
        {
          title: '单位面积租金/房价(元/㎡)',
          dataIndex: 'rentAmount',
          align: 'center',
          minWidth: 100
        },
        {
          title: '总套数',
          dataIndex: 'totalHouseCount',
          align: 'center',
          minWidth: 100
        },
        {
          title: '已选数量',
          dataIndex: 'chosenHouseCount',
          align: 'center',
          minWidth: 100
        },
        {
          title: '未选数量',
          dataIndex: 'notChosenHouseCount',
          align: 'center',
          minWidth: 100
        },
        {
          title: '拟选配/选购数量',
          dataIndex: 'planChosenHouseCount',
          align: 'center',
          minWidth: 100
        },
        {
          title: '可剩余数量',
          dataIndex: 'remainHouseCount',
          align: 'center',
          minWidth: 100
        },
        {
          title: '操作',
          valueType: 'action',
          fixed: 'right',
          width: 120,
          actions: [
			{
			  title: '详情',
			  type: 'view',
			  authCode: 'house:summary:delete'
			},
			{

              title: '删除',
              type: 'delete',
              authCode: 'house:summary:delete'
            }
          ]
        }
      ],
      /* table 数据 */
      tableData: {},
      tempTableData: {},
      batchNo: '',
      type: 10,
      selectedIds: [],
      showDrawer: false
    };
  },
  onLoad() {
    let self = this;
    getProjectHouseNameList().then(ret => {
      let opt = [];
      ret.forEach(it => {
        if (it.length > 0) {
          opt.push({
            name: it,
            value: it
          });
        }
      });
      self.searchForm[0].options = opt || [];
    });

    this.list();
  },
  methods: {
    downloadExcel() {
      window.open(`/download/房源分类数据总表模板.xls`);
    },
    uploadSuccess(res) {
      let self = this;
      self.batchNo = '';
      self.$utils.loading();
      uni.uploadFile({
        url: `${self.$env.base}/house/importFile/${this.type}`,
        file: res.file,
        name: 'file',
        header: {
          Authorization: uni.getStorageSync('token') || ''
        },
        success: ret => {
          self.$refs.uploadExcel.clearFiles();
          self.$utils.loading(true);
          let data = JSON.parse(ret.data);
          if (ret.statusCode == 200 && data.code === self.$env.successCode) {
            self.$utils.notify('文件[' + res.file.name + ']上传成功');
            self.batchNo = data.data;
            self.list(
                {
                  batchNo: self.batchNo,
                  confirm: 0
                },
                true
            );
          } else {
			self.$utils.notify('文件[' + res.file.name + ']上传失败!' + data.errMsg || '', 'error');
          }
        },
        fail: err => {
          self.$refs.uploadExcel.clearFiles();
          self.$utils.loading(true);
          self.$utils.notify('文件[' + res.file.name + ']上传失败', 'error');
        }
      });
    },
    confrimSubmit() {
      let self = this;
      confirm(this.batchNo, this.type).then(ret => {
        self.visble = false;
        self.$utils.notify('提交成功');
        self.list();
      });
    },
    list(params, isTemp) {
      let self = this;
      if (isTemp) {
        this.visble = true;
      }
      houseList({
        ...params,
        type: this.type,
        size: isTemp ? 10 : this.size
      }).then(ret => {
        if (!isTemp) {
          self.tableData = ret;
        } else {
          self.tempTableData = ret;
        }
      });
    },
    navToHistory() {
      uni.navigateTo({
        url: '/house/upload/history?type=' + this.type
      });
    },
    tempPageChange(e, size) {
      this.list(
          {
            current: e,
            ...this.searchData
          },
          true
      );
    },
    handleClick(data) {
      let self = this;
      switch (data.event.type) {
        case 'delete':
          this.$confirm('确定要删除这条数据吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteById(data.item.id, self.type).then(ret => {
              self.$utils.notify('操作成功');
              self.onSearch();
            });
          });
          break;
        case 'view':
          self.showDrawer = true
          break;
      }
    },
    async batchDownload() {
      let self = this;
      if (this.selectedIds.length === 0) {
        self.$utils.notify('请选择需要下载的表格数据', 'warning');
        return;
      }
      let ret = await createDownLoadTask({ids: this.selectedIds});
      downLoadExcelBatchByType(ret, this.type);
    },
    batchDownloadAll() {
      downLoadExcelBatchByType("all", this.type);
    },
    selectionChange(e) {
      let selectedIds = [];
      e.forEach(it => {
        selectedIds.push(it.id);
      });
      this.selectedIds = selectedIds;
    },
    pageChange(e, size) {
      this.size = size || this.size;
      this.list({
        current: e,
        ...this.searchData
      });
    },
    onSearch(e) {
      if (e) {
        this.searchData = e;
      }
      this.list({
        current: 1,
        ...this.searchData
      });
    },
    openDrawer() {
      this.showDrawer = true
    },
    closeDrawer() {
      this.showDrawer = false
    }
  }
};
</script>
<style>
.house-drawer .el-drawer__header {
    padding: 20px;
}
.house-drawer.el-drawer .el-drawer__header{line-height: 32px; padding: 0;}
.el-drawer__header { padding: 0;}
</style>

<style lang="scss" scoped>
.btns-box {
  padding: 0 16px;
  margin-bottom: -5px;
  border-radius: 5px;
  background-color: #fff;
  height: 50px;
  width: 100%;
  // border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;

  .upload-btn {
    margin: 0 10px;
    width: 80px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 12px;
    // background-color: #409eff;
    border: 1px solid #ccc;
  }
}
</style>
